<template>
	<!-- 投放系统-充值模板列表 -->
	<d2-container class="d-flex flex-column">
		<template v-if="$hasPermission('delivery:rechargeTemplate:index')">
			<div v-if="info.addTemplate" slot="header" class="d-flex mb-5" style="width: 100px;">
				<el-button ref="backBtn" type="primary" icon="" @click="addTemplate(false)">返回</el-button>
			</div>
			<div v-if="info.addTemplate" class="d-flex a-center j-center" slot="footer">
				<div class="d-flex my-5 b-s">
					<el-button type="primary" @click.stop="dataFormSubmitHandle" style="width: 150px;">保存</el-button>
				</div>
			</div>
			<template v-if="info.addTemplate && !showRetentionBox">
				<div class="d-flex h-100 b-s flex-column overflow">
					<el-form class="d-flex b-s py-10 px-10 mb-10" style="background-color: #f5f5f5;" :inline="true"
						size="medium" :model="templateForm">
						<el-form-item class="d-flex a-center mb-0" label="模板名称">
							<el-input v-model="templateForm.name" placeholder="模板名称" clearable />
						</el-form-item>
						<el-form-item v-if="info_applet_id==1" class="d-flex a-center mb-0" prop="applet_id" label="选择小程序">
							<el-select clearable v-model="templateForm.applet_id" placeholder="请选择"
								@change="$forceUpdate()">
								<el-option v-for="(item,index) in appletList" v-if="item.value!=1" :key="index" :label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<el-row style="background-color: #f5f5f5;">
						<el-col class="h-100 p-10 rounded5" :span="12" style="border-right: 5px solid #ffffff;">
							<div class="d-flex item flex-column b-s mb-10" style="background-color: #f5f5f5;">
								<div class="d-flex item-title a-center">
									<div class="d-flex mr-2"
										style="width:6px;height: 22px;background-color: #3291f8;border-radius: 5px;">
									</div>
									<div class="d-flex">{{templateForm.convention.length>0?'常规档位' : '挽留档位'}}</div>
								</div>
								<el-form v-for="(item,index) in templateForm.convention.length>0?templateForm.convention : templateForm.retention" :key="index"
									class="d-flex pt-10 pl-5 b-s mt-10 flex-column" :inline="false" size="small"
									:model="item">
									<el-form-item class="mb-10">
										<div class="d-flex">
											<div class="d-flex flex-shrink">
												{{item.name}}
										<!-- 		{{'常规挡位'+(index+1)}} -->
											</div>
											<div class="d-flex flex-column">
												<div class="d-flex flex-row mb-5">
													<el-input class="mx-10" v-model="item.amount" placeholder="请输入"
														@input="(v)=>(item.amount=oninput(v,2))"
														@focus="focusFn($event,item,'amount')" @blur="curent=''"
														clearable>
														<template slot="prepend">充</template>
														<template slot="append">元</template>
													</el-input>
													<div class="d-flex flex-shrink">
														追剧币 {{handleNum(item.amount)}}
													</div>
												</div>
												<div class="d-flex flex-row">
													<el-input class="mx-10" v-model="item.give_coin" placeholder="请输入"
														@input="(v)=>(item.give_coin=oninput(v,2))"
														@focus="focusFn($event,item,'give_coin')" @blur="curent=''"
														clearable>
														<template slot="prepend">赠</template>
														<template slot="append">币</template>
													</el-input>
													<div class="d-flex flex-shrink">
														追剧币 {{item.give_coin}}
													</div>
												</div>
											</div>
											<div v-if="templateForm.convention.length>1&&index!=0"
												class="d-flex a-center j-center pl-10 pr-5"
												@click.stop="deleteConvention(index,item.value)">
												<div class="d-flex a-center j-center close pointer">
													<d2-icon class="d-flex close-icon" name="close" />
												</div>
											</div>
										</div>
									</el-form-item>
								</el-form>
								<div v-if="templateForm.convention.length>0" class="d-flex a-center j-center">
									<el-button type="primary" icon="" @click="addConventionaList()"> 新增常规档位 </el-button>
								</div>
							</div>
							<div v-if="templateForm.convention.length>0" class="d-flex item flex-column b-s mb-5" style="background-color: #f5f5f5;">
								<div class="d-flex item-title a-center">
									<div class="d-flex mr-2"
										style="width:6px;height: 22px;background-color: #3291f8;border-radius: 5px;">
									</div>
									<div class="d-flex">超级会员档位</div>
								</div>

								<el-form v-for="(item,index) in templateForm.member" :key="index"
									class="d-flex px-10 b-s mt-10 flex-column" :inline="false" size="small"
									:model="item">
									<el-form-item class="">
										<div class="d-flex">
											<div class="d-flex flex-shrink">
												{{item.name}}
											</div>
											<div class="d-flex flex-column">
												<div class="d-flex flex-row a-center mb-5">
													<el-input class="mx-10" v-model="item.amount" placeholder="请输入"
														@input="(v)=>(item.amount=oninput(v,2))"
														@focus="focusFn($event,item,'amount')" @blur="curent=''"
														clearable>
														<template slot="prepend">充</template>
														<template slot="append">元</template>
													</el-input>
													<div class="d-flex flex-shrink">
														<el-switch v-model="item.status"
															@change="changeStatus(item,index)"></el-switch>
													</div>
												</div>
											</div>
										</div>
									</el-form-item>
								</el-form>
							</div>
							<div v-if="templateForm.convention.length>0" class="d-flex item flex-column b-s" style="background-color: #f5f5f5;">
								<div class="d-flex item-title a-center">
									<div class="d-flex mr-2"
										style="width:6px;height: 22px;background-color: #3291f8;border-radius: 5px;">
									</div>
									<div class="d-flex">促销档位</div>
								</div>
								<el-form v-for="(item,index) in templateForm.promotion" :key="index"
									class="d-flex p-10 b-s mb-10 flex-column" :inline="false" size="small"
									:model="item">
									<el-form-item class="mb-10">
										<div class="d-flex">
											<div class="d-flex flex-shrink">
												整剧购买
											</div>
											<div class="d-flex flex-column mr-10">
												<div class="d-flex flex-row mb-5">
													<el-input class="mx-10" v-model="item.amount" placeholder="请输入"
														@input="(v)=>(item.amount=oninput(v,2))"
														@focus="focusFn($event,item,'amount')" @blur="curent=''"
														clearable>
														<template slot="prepend">充</template>
														<template slot="append">元</template>
													</el-input>
													<div class="d-flex flex-shrink">
														解锁投放剧集
													</div>
												</div>
											</div>
											<div class="d-flex flex-shrink a-center">
												<el-switch class="d-flex" v-model="item.status"
													@change="changeStatus(item,index)"></el-switch>
											</div>
										</div>
									</el-form-item>
								</el-form>
							</div>
						</el-col>
						<el-col class="d-flex item flex-column h-100 p-10 rounded5" :span="12"
							style="border-left: 5px solid #ffffff;">
							<div class="d-flex item-title a-center j-sb">
								<div class="d-flex a-center">
									<div class="d-flex mr-2"
										style="width:6px;height: 22px;background-color: #3291f8;border-radius: 5px;">
									</div>
									<div class="d-flex">{{templateForm.convention.length>0 ?'充值页面设置':'挽留页面设置' }}</div>
								</div>
								<!-- <el-button class="mr-10" ref="backBtn" type="warning" icon="" @click="themeEdit()">主题修改</el-button> -->
							</div>

							
							<div v-if="this.templateId && templateForm.retention.length>0" class="item-simulate mt-15" style="position: relative;display: flex;align-items: center;justify-content: center;padding-top: 40px;">
								<div style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: #000;opacity:.9 ;"></div>
								<div style="width: 95%;height: 50%;position: absolute;z-index: 9;display: flex;align-items: center;flex-direction: column;padding-top: 40px;">
									<img :src="templateForm.retention[0].bgtype" style="width: 100%;height: auto;position: absolute;left: 0;top: 0;z-index: 1;" alt="">
									<div style="position: relative;z-index: 10;display: flex;align-items: center;">
										<img :src="templateForm.retention[0].footicon" style="width: 35px;height: auto;margin-top: -5px;">
										<span style="line-height: 29px;font-size: 20px;color: #544421;font-weight: 600;margin-left: 2px;">{{countJB()}}金币</span>
									</div>
									<div style="position: relative;z-index: 10;line-height: 29px;font-size: 20px;color: #544421;font-weight: 500;margin-top: 15px;">
										<span>特价</span><span style="font-weight: 600;color: #fd3d4e;font-size: 34px;margin: 0 2px;">{{templateForm.retention[0].amount || 0}}</span><span>元</span>
									</div>
									
										<div></div>
									
								</div>
							</div>
							<div  v-else class="item-simulate mt-15">
								<div class="d-flex list">
									<div v-for="(item,index) in showtableList" :key="index" :id="item.value"
										@click.stop="themeEdit(item,index)" class="box box-normal pointer"
										:class="{'box-active':curent==item.value}"
										:style="{    'background-image': 'url('+item.bgtype+')'}">
										<div v-if="item.classtext" class="give">
											<span :style="{'background-image': 'linear-gradient(to right,'+item.classbgc+')', color: item.classcolor }" style="position: absolute;top: -2px;left: -2px;padding: 4px 16px;border-radius: 10px 0 10px 0;">
												{{item.classtext}}
											</span>
										</div>
										<div class="price"
											style="position: absolute;top: 20px;width: 100%;height: 60px;"
											:style="{color:item.amountcolor}">
											<div class="diyprice1" :style="{color:item.amountcolor}">
												<span style="font-size: 20px;">￥</span>{{item.amount||0}}
											</div>
											<div v-if="item.give_coin>0" class="diyprice2" :style="{color:item.amountcolor}">
												多送{{handleNum2(item.give_coin)}}元
											</div>
										</div>
										<div v-if="item.type==1" class="diycardfoot" :style="{'background-image': 'linear-gradient(to right,'+item.footcolor+')'}">
											<img style="width: 16px;height: 16px;" :src="item.footicon" alt="" />
											{{handleGetNum(item.amount,item.give_coin)}}
										</div>
										<div v-if="item.foottext && item.type!==1" class="diycardfoot" :style="{'background-image': 'linear-gradient(to right,'+item.footcolor+')'}">
											{{item.foottext}}
										</div>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</template>
			<template v-else-if="showRetentionBox">
				<div class="d-flex h-100 b-s flex-column overflow" >
					<el-form class="d-flex b-s py-10 px-10 mb-10" style="background-color: #f5f5f5;align-items: center;" :inline="true"
						size="medium" :model="templateForm">
						<el-form-item class="d-flex a-center mb-0" label="模板名称">
							<el-input v-model="templateForm.name" placeholder="模板名称" clearable />
						</el-form-item>
				
						<el-form-item v-if="info_applet_id==1" class="d-flex a-center mb-0" prop="applet_id" label="选择小程序">
							<el-select clearable v-model="templateForm.applet_id" placeholder="请选择"
								@change="$forceUpdate()">
								<el-option v-for="(item,index) in appletList" v-if="item.value!=1" :key="index" :label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<el-row style="background-color: #f5f5f5;">
						<el-col class="h-100 p-10 rounded5" :span="12" style="border-right: 5px solid #ffffff;">
							<div class="d-flex item flex-column b-s mb-10" style="background-color: #f5f5f5;">

								<div class="d-flex item-title a-center">
									<div class="d-flex mr-2"
										style="width:6px;height: 22px;background-color: #3291f8;border-radius: 5px;">
									</div>
									<div class="d-flex">挽留档位</div>
								</div>
								<el-form v-for="(item,index) in templateForm.retention" :key="index"
									class="d-flex pt-10 pl-5 b-s mt-10 flex-column" :inline="false" size="small"
									:model="item">
									<el-form-item class="mb-10">
										<div class="d-flex">
											<div class="d-flex flex-shrink">
												{{item.name}}
										<!-- 		{{'常规挡位'+(index+1)}} -->
											</div>
											<div class="d-flex flex-column">
												<div class="d-flex flex-row mb-5">
													<el-input class="mx-10" v-model="item.amount" placeholder="请输入"
														@input="(v)=>(item.amount=oninput(v,2))"
														@focus="focusFn($event,item,'amount')" @blur="curent=''"
														clearable>
														<template slot="prepend">充</template>
														<template slot="append">元</template>
													</el-input>
													<div class="d-flex flex-shrink">
														追剧币 {{handleNum(item.amount)}}
													</div>
												</div>
												<div class="d-flex flex-row">
													<el-input class="mx-10" v-model="item.give_coin" placeholder="请输入"
														@input="(v)=>(item.give_coin=oninput(v,2))"
														@focus="focusFn($event,item,'give_coin')" @blur="curent=''"
														clearable>
														<template slot="prepend">赠</template>
														<template slot="append">币</template>
													</el-input>
													<div class="d-flex flex-shrink">
														追剧币 {{item.give_coin}}
													</div>
												</div>
											</div>
											
										</div>
									</el-form-item>
								</el-form>
								
							</div>

						</el-col>
						
						<el-col class="d-flex item flex-column h-100 p-10 rounded5" :span="12"
							style="border-left: 5px solid #ffffff;">
							<div class="d-flex item-title a-center j-sb">
								<div class="d-flex a-center">
									<div class="d-flex mr-2"
										style="width:6px;height: 22px;background-color: #3291f8;border-radius: 5px;">
									</div>
									<div class="d-flex">挽留页面展示</div>
								</div>
						
							</div>

							<div class="item-simulate mt-15" style="position: relative;display: flex;align-items: center;justify-content: center;">
								<div style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: #000;opacity:.9 ;"></div>
								<div style="width: 95%;height: 50%;position: absolute;z-index: 9;display: flex;align-items: center;flex-direction: column;padding-top: 40px;">
									<img :src="templateForm.retention[0].bgtype" style="width: 100%;height: auto;position: absolute;left: 0;top: 0;z-index: 1;" alt="">
									<div style="position: relative;z-index: 10;display: flex;align-items: center;">
										<img :src="templateForm.retention[0].footicon" style="width: 35px;height: auto;margin-top: -5px;">
										<span style="line-height: 29px;font-size: 20px;color: #544421;font-weight: 600;margin-left: 2px;">{{countJB()}}金币</span>
									</div>
									<div style="position: relative;z-index: 10;line-height: 29px;font-size: 20px;color: #544421;font-weight: 500;margin-top: 15px;">
										<span>特价</span><span style="font-weight: 600;color: #fd3d4e;font-size: 34px;margin: 0 2px;">{{templateForm.retention[0].amount || 0}}</span><span>元</span>
									</div>
									
										<div></div>
									
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</template>
			<template v-else>
				<div class="d-flex b-s mt-2 mb-10 j-sb" slot="header">
					<el-form class="d-flex b-s" :inline="true" size="small" :model="searchForm"
						@keyup.enter.native="getTableList(true)" @submit.native.prevent>
						<el-form-item label="模板名称">
							<el-input v-model="dataForm.keyword" placeholder="模板名称" clearable />
						</el-form-item>
						<el-form-item>
							<el-button icon="el-icon-search" type="primary" @click="getTableList(true)">查询</el-button>
						</el-form-item>
						<el-form-item v-show="$hasPermission('delivery:rechargeTemplate:create')">
							<el-button icon="el-icon-circle-plus-outline" type="success"
								@click="addTemplate()">新增自定义充值模板</el-button>
						</el-form-item>
						<el-form-item v-show="$hasPermission('delivery:rechargeTemplate:create')">
							<el-button icon="el-icon-circle-plus-outline" type="success"
								@click="addRetention()">新增挽留充值模板</el-button>
						</el-form-item>
					</el-form>
					<div class="d-flex">
						<vxe-toolbar ref="toolbarRef" custom :refresh="{ queryMethod: getTableList,code:'query' }"></vxe-toolbar>
					</div>
				</div>
				<vxe-table ref="xTable" border height="100%" resizable :data="dataList" :loading="tableLoading"
					:loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}">
					<vxe-column width="100" field="id" title="模板ID" sortable align="center"></vxe-column>
					<vxe-column width="180" field="name" title="模板名称" align="center"></vxe-column>
					<vxe-column header-class-name="delivery_rechargeTemplate_aname" width="150" field="applet_name" title="小程序名称" align="center"
					:filters="appletFilters" :filter-method="filterApplet"></vxe-column>
					<vxe-column width="180" field="template_type_name" title="模板类型" align="center"></vxe-column>
					<vxe-colgroup title="档位预览" align="center">
						<vxe-column width="248" field="convention" title="普通充值" align="center">
							<template v-slot="{ row }">
								<div v-for="(item,index) in row.convention" :key="index" class="w-100"
									:class="{'mb-3':row.convention.length>1&&index+1!=row.convention.length}">{{item}}
								</div>
							</template>
						</vxe-column>
						<vxe-column width="248" field="member" title="超级会员" align="center">
							<template v-slot="{ row }">
								<div v-for="(item,index) in row.member" :key="index" class="w-100"
									:class="{'mb-3':row.member.length>1&&index+1!=row.member.length}">{{item}}</div>
							</template>
						</vxe-column>
						<vxe-column width="248" field="promotion" title="促销档位" align="center">
							<template v-slot="{ row }">
								<div v-for="(item,index) in row.promotion" :key="index" class="w-100"
									:class="{'mb-3':row.promotion.length>1&&index+1!=row.promotion.length}">{{item}}
								</div>
							</template>
						</vxe-column>
					</vxe-colgroup>
					<vxe-column width="180" field="company_name" title="公司名称" align="center"></vxe-column>
					<vxe-column width="160" field="created_at" title="创建时间" sortable cell-type="string"
						align="center"></vxe-column>
					<vxe-column width="160" field="updated_at" title="修改时间" sortable cell-type="string"
						align="center"></vxe-column>
					<vxe-column width="100" field="status_name" title="状态" align="center"></vxe-column>
					<vxe-column v-if="!tableLoading||(dataList.length&&$hasPermissionNum(['delivery:rechargeTemplate:update','delivery:rechargeTemplate:copy']))"
					:width="($hasPermissionNum(['delivery:rechargeTemplate:update','delivery:rechargeTemplate:copy']))*90"
					title="操作" align="center" fixed="right">
						<template #default="{ row }">
							<el-button size="small" round icon="el-icon-edit"
								v-if="$hasPermission('delivery:rechargeTemplate:update')&&row.id!=1"
								@click="addTemplate(true,row)" type="primary">修改</el-button>
							<el-button size="small" round icon="el-icon-edit"
								v-if="$hasPermission('delivery:rechargeTemplate:copy')&&row.id!=1"
								@click="copyitem(row)" type="warning">复制</el-button>
							<!-- <el-button size="small" round icon="el-icon-delete"
								v-if="$hasPermission('delivery:rechargeTemplate:delete')"
								@click="deleteHandleSetter(row)" type="primary">删除</el-button> -->
						</template>
					</vxe-column>
					<template #empty>
						<div class="d-flex flex-row a-center j-center font-md">
							<div class="d-flex">
								暂时没有充值模板~
							</div>
						</div>
					</template>
				</vxe-table>
				<!-- 分页 -->
				<div class="d-flex" slot="footer">
					<vxe-pager background size="medium" align="right" :border="false" :current-page="dataForm.page"
						:page-size="dataForm.pageSize" :total="total" :pageSizes="[20,50,100,150,200]"
						:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump', 'Total']"
						@page-change="handlePageChange">
					</vxe-pager>
				</div>
			</template>
			<!-- 主题修改弹窗 -->


			<changmuban ref="diyref" @changeItem="changeItem" @dCancel="quxiao" :selectimg="selectimg"
				:userData="changItemdata" :show-dialog.sync="themeEditVisible" />
		</template>
		<template v-else>
			<div class="d-flex a-center j-center h-100 b-s flex-column">
				<img class="d-flex b-s mt-2 mb-10" src="../../../public/image/download.png" style="width: 300px;">
				<div class="d-flex">抱歉，您没有访问权限</div>
			</div>
		</template>
	</d2-container>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import rechargeTemplateThemeEdit from './rechargeTemplate-theme-edit'
	import changmuban from '../../components/changmuban/changmuban.vue'
	import mixinViewModule from '@/mixins/view-module'

	import {
		Decimal
	} from 'decimal.js'
	import {
		constant
	} from 'lodash'
	export default {
		mixins: [mixinViewModule],
		components: {

			changmuban
		},
		data() {
			return {
				showRetentionBox:false,
				appletFilters:[],//小程序名称筛选数组
				pagemounted:false,
				theshowtableindex: 0,
				footicon: 0,
				gifttype: 0,
				bgtype: 0,
				classtype: null,
				changItemdata: {},
				changItemdata2:{},
				selectimg: {},
				themeEditVisible: false,
				showtableList: [],
				info_applet_id: null,
				delivery_user_id:[],
				tableLoading: false,
				templateId: '',
				curent: 0,
				total: 0,
				firstConvention: {},
				searchForm: {
					keyword: ''
				},
				dataForm: {
					page: 1,
					pageSize: 20
				},
				templateForm: {

				},
				companyName: [],
				appletList: [],
				sortInfo: [], //排序
				// 增改
				dataList: [],
			}
		},
		created() {
			console.warn('createdcreatedcreatedcreatedcreatedcreated');
			this.appletList = this.info.applet;
			this.getbgcList();
		},
		mounted() {
			this.pagemounted = true;
		},
		watch: {
			dataList:{
				handler(newValue) {
					setTimeout(()=>{
						this.getAppletFilters(this.dataForm.applet_ids,newValue);
					},300)
				},
				deep: true
			},
			'info.applet_id': {
				handler(newVal,oldVal) {
					if(newVal!=oldVal){
						if (typeof newVal == 'number') {
							console.warn('========投放系统-充值模板列表-监听小程序ID发生变化=======');
							console.log(newVal);
							this.info_applet_id = newVal;
							this.$forceUpdate();
							if (this.$hasPermission('delivery:rechargeTemplate:index')&&this.pagemounted) {
								if (this.info.addTemplate) {
									if (this.info.templateId) {
										this.templateId = this.info.templateId;
										this.getTemplateData(this.info.templateId);
									} else {
										this.getTempleteFn();
									}
								} else {
									this.getTableList(true);
								}
							}
						}
					}
				},
				deep: true,
				immediate: true
			},
			'info.delivery_user_id': {
				handler(newVal,oldVal) {
					if(newVal!=oldVal){
						if (Array.isArray(newVal)) {
							console.warn('========投放组员ID发生变化=======');
							console.log(newVal);
							this.delivery_user_id = newVal;
							this.$forceUpdate();
							if(this.pagemounted){
								if (this.$hasPermission('delivery:rechargeTemplate:index')) {
									this.getTableList(true);
								}
							}
						}
					}
				},
				deep: true,
				immediate: true
			},
			pagemounted: {
				handler(newVal) {
					if(newVal){
						console.warn('=======初始化请求=======');
						if (this.info.addTemplate) {
							if (this.info.templateId) {
								this.templateId = this.info.templateId;
								this.getTemplateData(this.info.templateId);
							} else {
								this.getTempleteFn();
							}
						} else {
							this.getTableList(true);
						}
					}
				},
				deep: true,
				immediate: true
			}
		},
		computed: {
			...mapState('d2admin/user', [
				'info'
			]),

		},
		methods: {
			...mapMutations({
				pageInit: 'd2admin/page/init',
				headerSet: 'd2admin/menu/headerSet'
			}),
			countJB(){
				return Number(this.templateForm.retention[0].give_coin) + Number(this.templateForm.retention[0].amount)*100  || 0
			},
			getAppletFilters(applet_id,datalist){
				let anameDom = document.querySelector('.delivery_rechargeTemplate_aname span.vxe-cell--filter');
				if(applet_id==1||!applet_id){
					if(Array.isArray(this.info.applet)&&this.info.applet.length){
						this.appletFilters = this.info.applet.filter((item)=>{
							return item.value&&item.value!=1
						})
						if(anameDom&&datalist.length){
							anameDom.style.display = 'inline-block';
						}else{
							anameDom.style.display = 'none';
						}
						return
					}
				}
				this.appletFilters = [];
					console.log(anameDom);
				if(anameDom){
					anameDom.style.display = 'none';
				}
			},
			filterApplet ({ option, row }) {
				return row.applet_name == option.label
			},
			async getbgcList() { //-----
				const list = await this.$axios.get('/api/common/rechangeCover');
				if(typeof list == 'object' && list!=null){
					this.selectimg = list;
					console.log(380, list);
					return;
				}
				this.selectimg = {};
			},
			// chageclass(item){
			// 	if(item){
			// 		if(item.indexOf(",")!=-1){
			// 			return 'linear-gradient(to right,'+item+')'
						
			// 		}else{
			// 			return 'linear-gradient(to right,'+item+','+item+')'
			// 		}
			// 	}else{
			// 		return null
			// 	}
				
			// },
			changeItem(item) { //--------
				console.log(394, item)
				let citem = this.showtableList[this.theshowtableindex]
				citem.amount = item.amount;
				citem.amountcolor = item.amountcolor
				citem.bgtype = item.bgtype
				citem.classbgc = item.classbgc
				citem.classcolor = item.classcolor
				citem.classtext = item.classtext
				citem.day = item.day
				citem.footcolor = item.footcolor
				citem.footicon = item.footicon
				citem.foottext = item.foottext
				citem.giftbgc = item.giftbgc
				citem.giftcolor = item.giftcolor
				citem.gifttype = item.gifttype
				citem.give_coin = item.give_coin
				citem.id = item.id
				citem.name = item.name
				citem.status = item.status
				citem.type = item.type
				citem.value = item.value	
				
				
				// this.showtableList[this.theshowtableindex] = item
				this.themeEditVisible = false;
				console.log(398, this.showtableList)
				console.log(404, this.templateForm)
			},
			
			quxiao() { //--------
				console.log(399)
				this.themeEditVisible = false;
			},
			themeEdit(item, index) { //--------
				let that = this;
				this.theshowtableindex = index

				if (item.bgtype) { //背景模板
					this.selectimg.bgimg.forEach((el) => {
						if (el.bgtype == item.bgtype) {
							console.log(405)
							that.bgtype = el.id
						}
					})
				}

				if (item.give_coin != '') { //多送
					console.log(413, item.give_coin)

					this.gifttype = 1
				} else {
					console.log(416, item.give_coin)

					this.gifttype = 0
				}

				if (item.classtext != '') { //角标

					this.classtype = 1
				} else {

					this.classtype = 0
				}

				// if(item.footicon!=''){  //金币
				// 	this.selectimg.coin.forEach(el=>{
				// 		if(el.cover == item.footicon){
				// 			console.log(4347)
				// 			that.footicon = el.id
				// 		}
				// 	})
				// }else{
				// 		that.footicon = 0
				// }
				
				this.changItemdata = item
				// this.changItemdata2 = JSON.parse(JSON.stringify(this.templateForm))
				// console.log(387, this.changItemdata2)

				this.themeEditVisible = !this.themeEditVisible;
				console.log(398, this.themeEditVisible)
				this.$refs.diyref.init(that.bgtype, that.classtype, that.gifttype,item);
			},
			handleGetNum(amount, give_coin) { //--------
			    if(!amount  ){ return}
				if (give_coin == 0) {
					return (new Decimal(amount).times(100).toFixed(2).replace(/\.?0+$/, '')) + '看币'
				} else {
					return (new Decimal(amount).times(100).toFixed(2).replace(/\.?0+$/, '')) + '+' + give_coin + '看币';
				}
			},
			focusFn(event, item, field) {
				let value = event.target.value;
				this.curent = item.value;
				if (value == 0) {
					item[field] = '';
				}
			},
			handleNum(num) {
				if (num) {
					let number = new Decimal(num);
					let result = number.times(100).toFixed(2);
					result = result.replace(/\.?0+$/, '');
					return result;
				}
			},
			handleNum2(num) { //--------
				if (num) {
					let number = new Decimal(num);
					let result = number.times(0.01).toFixed(2);
					result = result.replace(/\.?0+$/, '');
					return result;
				}
			},
			oninput(num, limit) {
				let str = num,
					len1 = str.substr(0, 1),
					len2 = str.substr(1, 1);
				//如果第一位是0，第二位不是点，就用数字把点替换掉
				if (str.length > 1 && len1 == 0 && len2 != ".") {
					str = str.substr(1, 1)
				}
				//第一位不能是.
				if (len1 == ".") {
					str = ""
				}
				//限制只能输入一个小数点
				if (str.indexOf(".") != -1) {
					let str_ = str.substr(str.indexOf(".") + 1)
					if (str_.indexOf(".") != -1) {
						str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
					}
				}
				//正则替换
				str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
				if (limit / 1 === 1) {
					str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, '$1') // 小数点后只能输 1 位
				} else {
					str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1') // 小数点后只能输 2 位
				}
				str = str.substr(0, 6);
				return str;
			},
			clearCompanyFn() {
				this.$set(this.searchForm, 'applet_ids', '');
				this.$set(this.templateForm, 'applet_id', '');
				this.appletList = [];
			},

			//模板列表  xing
			async getTempleteFn() {
				const templateForm = await this.$axios.get('/api/common/templete');
				console.log(454, templateForm);
				let taht = this
				let sortInfo = []

				templateForm.convention.forEach((item, index) => {
					item.name = item.name + (index + 1)
				})
				let arr = [...templateForm.convention, ...templateForm.member, ...templateForm.promotion];
				let arr2 = [];
				console.log(632, arr)
				arr.forEach(item => {
					item.value = taht.getValue('convention');
					if (item.status) {
						arr2.push(item)
						sortInfo.push(item.value)
					}
				})
				this.sortInfo = JSON.parse(JSON.stringify(sortInfo));
				templateForm.sortInfo = JSON.parse(JSON.stringify(sortInfo));
				if(this.templateForm.name) templateForm['name'] = this.templateForm.name;
				this.templateForm = templateForm;

				console.log(485, sortInfo)
				console.log(640, arr2)
				this.showtableList = arr2


			},
			// 生成58位的唯一的value值
			getValue(field = '') {
				let len = 58,
					chars = field + 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678',
					maxPos = chars.length,
					value = '';
				for (let t = 0; t < len; t++) {
					value += chars.charAt(Math.floor(Math.random() * maxPos));
				}
				return value;
			},

			changeStatus(item, index) {
				console.log(508, item.value, index)
				let templateForm = this.templateForm
				console.log(510, this.showtableList)
				if (item.status) {
					this.sortInfo.push(item.value)
					this.templateForm.sortInfo.push(item.value)
					this.showtableList.push(item)
				} else {
					console.log('515')
					this.sortInfo = this.sortInfo.filter(e => {
						if (e != item.value) {
							return e
						}
					})
					this.templateForm.sortInfo = this.templateForm.sortInfo.filter(e => {
						if (e != item.value) {
							return e
						}
					})
					this.showtableList = this.showtableList.filter(e => {
						if (e.value != item.value) {
							return e
						}
					})
				}
			},

			// 表单提交
			dataFormSubmitHandle() {
				let obj = {};
				if(!this.showRetentionBox){
					if (this.showtableList.some(item => {
						return Number(item.amount) <= 0
						})) {
						console.log(497, this.showtableList.some(item => {
							return Number(item.amount) <= 0
						}))
						return this.$message({
							message: '价格不能为空',
							type: 'error',
							duration: 1500
						})
					}
				}
				
				if(this.info_applet_id != this.templateForm['applet_id']){
					if(this.info_applet_id!=1&&this.info_applet_id){
						this.templateForm['applet_id'] = this.info_applet_id;
					}
				}
				if(this.templateForm['applet_id']==1||!this.templateForm['applet_id']){
					return this.$message({
						message: '请先选择小程序',
						type: 'error',
						duration: 1500
					})
				}

				if(this.templateId){
					obj = {...this.templateForm}
				}else{
					if(this.showRetentionBox){ // 挽留
						let {retention,applet_id,company_id,name} = this.templateForm;
						obj = {retention,applet_id,company_id,name,status:1,type:2};
						console.log(708,this.showRetentionBox,obj,this.templateId)
					}else{
						obj = {...this.templateForm,type:1}
					}
				}
				console.log(712, this.templateForm)
				this.$axios.post(this.templateId ? `/api/delivery/rechargeTemplate/update/${this.templateId}` :
				'/api/delivery/rechargeTemplate/create', {...obj}).then(res => {
					this.$message({
						message: this.$t('views.public.success'),
						type: 'success',
						duration: 1500
					})
					this.getTableList(this.templateId?false:true);
					this.$forceUpdate();
					this.templateId = null;
					this.info.templateId = null;
					this.info.addTemplate = false;
					this.showRetentionBox = false;
					this.templateForm.name = '';
					this.templateForm.company_id = '';
					this.$store.dispatch('d2admin/user/set', this.info, {root: true});
				}).catch(() => {})
			},

			addConventionaList() { //常规挡位新增  //--------
				// debugger;
				let len = this.templateForm.convention.length;
				console.log(633, len)
				if (len > 5) {
					return this.$message({
						message: '常规档位最多添加6条',
						type: 'error',
						duration: 1200
					});
				}
				// let obj = {
				// 	amount: '',
				// 	day: 0,
				// 	give_coin: 0,
				// 	id: 0,
				// 	name: "",
				// 	status: true,
				// 	type: 1,
				// 	value: "",
				// 	amountcolor: "#000000",
				// 	bgtype: "http://ky-dj.oss-accelerate.aliyuncs.com/images/83/836c8225612ab16e9ce5f3aabe4e62ac.png", // 对应的背景图片
				// 	classtext: "", // 角标文本   
				// 	classcolor: '#ffffff', //角标字体颜色 默认 #000000
				// 	classbgc: '#ff0000', // 角标背景颜色   默认 #f53732
				// 	foottext: '', //  底部文本
				// 	footcolor: '#000000', // 底部字体颜色   默认 #000000
				// 	footicon: '', // 底部图标   
				// 	giftbgc: '#f53732', // 多送背景颜色   默认#f53732
				// 	giftcolor: '#ffffff' // 多送字体颜色  默认#ffffff
				// }

				let obj ={
					amount: "0",
					amountcolor: "#000000",
					bgtype: "http://ky-dj.oss-accelerate.aliyuncs.com/images/83/836c8225612ab16e9ce5f3aabe4e62ac.png",
					classbgc: "#ff0000",
					classcolor: "",
					classtext: "",
					day: 0,
					footcolor: "#000000",
					footicon: "https://ky-dj.oss-accelerate.aliyuncs.com/images/e9/e9bbe1e658b48e8f8d56826b073ececf.png",
					foottext: "",
					giftbgc: "#ff0000",
					giftcolor: "#ffffff",
					give_coin: 0,
					name: "",
					status: true,
					type: 1,
					value: ""
				}

				obj.name = '常规档位' + (len + 1);
				let diyname = this.getValue('convention');
				obj.value = diyname
				this.templateForm.convention.push(obj);
				this.templateForm.sortInfo.push(diyname)
				this.sortInfo.push(diyname);
				console.log(667, this.showtableList, obj)
				this.showtableList.push(obj)
				// console.log(668,this.templateForm.convention);
			},

			tapbox(item, index) {
				this.curent = index;
				console.log(this.curent);
			},
			deleteConvention(index, value) {
				console.log('deleteConventiondeleteConventiondeleteConvention');
				let templateForm = this.templateForm;
				this.templateForm = templateForm
				let showtableList = this.showtableList;
				console.log(572, value)
				console.log(744,templateForm)
				
				showtableList = showtableList.filter(item => {
					if (item.value !== value) {
						console.log(581, item.value)
						return item
					}
				})
				this.sortInfo = this.sortInfo.filter(e => {
					if (e != templateForm.convention[index].value) {
						return e
					}
				})
				this.templateForm.sortInfo = this.templateForm.sortInfo.filter(e => {
					if (e != templateForm.convention[index].value) {
						return e
					}
				})
				
				console.log(560, this.sortInfo)
				templateForm.convention.splice(index, 1)
				
			
				
				this.showtableList = showtableList
				
				templateForm.convention.forEach((item,index)=>{
					console.log(771,item)
					this.templateForm.convention[index].name = '常规档位'+(index+1)
				})

			},
			async getTableList(init = false) { //获取
				if(init&&typeof init =='boolean'){
					this.dataForm.page = 1;
				}
				this.tableLoading = true;
				this.dataForm['applet_ids'] = this.info_applet_id;
				this.dataForm['delivery_user_id'] = this.delivery_user_id;
				console.log(this.dataForm);
				const tableRes = await this.$axios.get('/api/delivery/rechargeTemplate?' + this.$qs.stringify(this.dataForm));
				console.log(571, tableRes)
				this.tableLoading = false;
				if(typeof tableRes == 'object' && tableRes!=null){
					this.total = tableRes.total||0;
					if(Array.isArray(tableRes.data)){
						if(tableRes.data.length){
							this.dataList = tableRes.data;
							return;
						}
					}
					return;
				}
				this.total = 0;
				this.dataList = [];
			},
			//复制
			async copyitem(item){
			
				const copy = await this.$axios.get(`/api/delivery/rechargeTemplate/copy/${item.id}`);
					console.log(793,copy)
					this.$message({
						message: "复制成功",
						type: 'success',
						duration: 1500,
					})
					this.getTableList(true);
				
			},
			//新增挽留充值模板
			async addRetention(isTemplate = true, row){
				console.log(865,this.info)
				await this.getTempleteFn();
				this.info.addTemplate = true;
				this.showRetentionBox = true;
			},
			//新增自定义充值模板        
			async addTemplate(isTemplate = true, row) {
				console.log('显示自定义充值模板：' + isTemplate);
				if (this.info.addTemplate == isTemplate) return;
				if (isTemplate) {
					if (typeof row == 'object' && row != null) {
						console.warn('编辑自定义充值模板');
						this.templateId = row.id;
						this.info.templateId = row.id;
						this.getTemplateData(this.templateId);
					} else {
						console.warn('新建自定义充值模板');
						console.log(this.templateForm);
						await this.getTempleteFn();
					}
				} else {
					console.warn('返回充值模板列表');
					this.templateForm.name = '';
					this.templateId = null;
					this.info.templateId = null;
					this.showRetentionBox = false;
					this.getTableList();
				}
				console.log(this.info);
				this.info.addTemplate = isTemplate;
				this.$forceUpdate();
				await this.$store.dispatch('d2admin/user/set', this.info, {
					root: true
				})
			},


			//获取充值模板详情
			async getTemplateData(templateId) {
				// console.log('获取充值模板详情');
				const templateRes = await this.$axios.get(`/api/delivery/rechargeTemplate/update/${templateId}`);
				console.log('获取充值模板详情', templateRes);


				let sortInfo = templateRes.sortInfo;
				this.sortInfo = JSON.parse(JSON.stringify(sortInfo));
				this.templateForm = templateRes;


				let arr = [...templateRes.convention, ...templateRes.member, ...templateRes.promotion];
				let arr2 = [];
				console.log(632, arr)
				sortInfo.forEach(item => {
					arr.forEach(item2 => {
						if (item == item2.value) {
							arr2.push(item2)
						}
					})
				})


				console.log(640, arr2)
				this.showtableList = arr2

				
			},
			// 删除
			deleteHandleSetter(row) {
				this.$confirm(this.$t('public.prompt.info', {
					handle: this.$t('views.public.delete')
				}), this.$t('public.prompt.title'), {
					confirmButtonText: this.$t('views.public.confirm'),
					cancelButtonText: this.$t('views.public.cancel'),
					type: 'warning'
				}).then(() => {
					this.$axios.delete(`/api/delivery/rechargeTemplate/delete/${row.id}`, {}).then(res => {
						this.getTableList();
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 1500,
							onClose: () => {}
						})
					}).catch(() => {})
				}).catch(() => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	:deep(span.vxe-cell--filter){
		display: none;
	}
	.item {
		.close {
			width: 26px;
			height: 26px;
			border: 2px solid #f76f21;
			border-radius: 26px;

			.close-icon {
				font-size: 20px;
				color: #f76f21;
			}
		}

		.item-title {
			font-size: 22px;
			font-weight: bold;
		}

		.item-simulate {
			box-sizing: border-box;
			border: 6px solid #a3a2a2;
			border-radius: 10px;
			width: 375px;
			min-height: 700px;
			max-height: 1200px;
			margin: 0 auto 10px;
			padding: 10px 5px;

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: flex-start;

				.box {
					width: 165px;
					height: 100px;
					cursor: default;
					border: 1px solid #e5e5e5;
					border-radius: 10px;
					display: flex;
					flex-direction: column;
					position: relative;
					
				
					padding: 0 !important;
					box-sizing: content-box;
					margin-top: 10px;
				
					overflow: hidden;
					background-position: center;
					background-repeat: no-repeat;
					background-size: cover;

					.tip {
						height: 14px;
						font-size: 12px;
						margin: 0;
						color: #bf891c;
					}

					.give {
						
			
				
						height: 20px;

						color: #fff;
		
						font-size: 11px;
						font-weight: 600;
						margin: 0;
						
						position: relative;
						// background: #f53732;
					}

					.pointer {
						width: 50%;
						height: auto;
						position: absolute;
						bottom: 10px;
						right: -10px;
					}

					.price {
						font-size: 15px;
						font-weight: 600;
						line-height: 35px;
						margin: 0;

						em {
							font-size: 28px;
							font-style: normal;
						}
					}

					.get {
						width: 100%;
						height: 36px;
						line-height: 36px;
						text-align: center;
						// background: linear-gradient(180deg, #fff19d, #ff9e00);
						border-radius: 0 0 5px 5px;
						font-size: 14px;
						// color: #583600;
						letter-spacing: 1px;
						font-weight: 500;
						margin: 0px;
					}
				}

				.box-normal {
					.price {
						// color: #f76f21;

						i {
							font-size: 15px;
							color: #f95e5e;
						}
					}

					// .get {
					// 	background: #fff7e3;
					// 	color: #bf891c;
					// }
				}

				.box-superVip {
					background: url() no-repeat;
					border: none;
					// background-size: 105% 105%;
					border: 1px solid #e5e5e5;
					background-position: center;
					background-repeat: no-repeat;
					background-size: cover;

					.price {
						color: #8d5a0b;
					}

					// .get {
					// 	background: #6b4403;
					// 	color: #fff;
					// 	font-size: 12px;
					// }
				}

				.box-promotion {
					background: url() no-repeat;
					border: none;
					background-size: 105% 105%;
					border: 1px solid #e5e5e5;

					.price {
						margin-bottom: 16px;
					}

					// .get {
					// 	background: #fe5a40;
					// 	color: #fff;
					// 	font-size: 12px;
					// }
				}

				.box-active {
					border: 2px solid #f97d36;
				}
			}
		}
	}
	.diyprice1{
		width: 100%;
		display: flex;
		justify-content: center;
		font-size: 24px;
		line-height: 24px;
		margin-top: 8px;
		color: #603013;
	}
	.diyprice2{
		width: 100%;display: flex;justify-content: center;font-size: 12px;line-height: 14px;margin-top: 4px;color: #603013;
	}
	.diycardfoot{
		width: 100%;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 0;
		left: 0;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 1px;
		font-family: cursive;
		color: #603013;
	}
</style>